<template>
    <div class="genguo">
        <el-row>
            <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="16" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light hidden-md-and-down" style="margin:40px 0 100px;">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <el-row>
                                    <el-col :span="6">
                                        <div style="cursor: pointer" class="grid-content bg-purple" @click="msgs++">
                                            <div class="btn-like">
                                                <div class="like-l">
                                                    <a>喜欢</a>
                                                </div>
                                                <div class="like-r">
                                                    <span style="color:#EA6F5A;font-size:18px;">{{msgs}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple"></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple-light">
                                            <div class="btn-r">
                                                <a href>
                                                    <div class="weixin">
                                                        <div>
                                                            <img src="../../assets/ContNavimg/weixin.png" alt
                                                                 style="height:28px;width:28px;margin-top:7px;">
                                                        </div>
                                                    </div>
                                                </a>
                                                <a href>
                                                    <div class="weibo">
                                                        <div>
                                                            <img src="../../assets/ContNavimg/weibo.png" alt
                                                                 style="height:28px;width:28px;margin-top:7px;">
                                                        </div>
                                                    </div>
                                                </a>
                                                <a href>
                                                    <div class="tupian">
                                                        <div style="margin-top:7px;">
                                                            <i class="el-icon-picture"
                                                               style="font-size:28px; color:#9B9B9B"></i>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a href>
                                                    <div class="fen">
                                                        <div style="margin-top:14px;color:#9b9b9b">
                                                            <span>更多分享</span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import 'element-ui/lib/theme-chalk/display.css';

    export default {
        data() {
            return {
                msgs: '50'
            }
        },
        methods:{
            // incrementTotal(){
            //     this.msgs++
                // this.$emit("increment")
            // }
        }
    };
</script>
<style scoped>
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple-light {
        height: 48px;
        /* background: #e5e9f2; */
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .btn-like {
        display: inline-block;
        width: 85%;
        margin-top: 20px;
        height: 50px;
        border: 1px solid #ea6f5a;
        border-radius: 40px;
    }

    .like-l {
        margin-left: 40px;
        margin-top: 7px;
        height: 10px;
        padding: 5px 0 15px 0;
        display: inline-block;
        border-right: 1px solid #ea6f5a;
    }

    .like-l a {
        font-size: 19px;
        margin-right: 20px;
        color: #ea6f5a;
        text-decoration: none;
    }

    .like-r {
        display: inline-block;
        margin-left: 20px;
    }

    .btn-r {
        float: right;
        margin-top: 20px;
        height: 50px;
    }

    .weixin,
    .weibo,
    .tupian {
        width: 48px;
        height: 48px;
        margin-left: 5px;
        text-align: center;
        border: 1px solid #dcdcdc;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
        position: relative;
        margin-right: 7px;
    }

    .fen {
        width: 94px;
        height: 50px;
        display: inline-block;
        border: 1px solid #dcdcdc;
        border-radius: 40px;
        vertical-align: middle;
        text-align: center;
        margin: 0 auto;
    }
</style>
